<template>
  <!-- 创建时间：2023/4/24 -->
  <!-- 作者：admin -->
  <!-- HotSongPart组件说明： 热门歌曲列表部分-->
    <div class="hot-song-part">
        <!--头部信息-->
        <PartTitle :title-info="titleInfo"/>
        <div class="hot-song-content">
            <el-row v-for="rows in playList.slice(0,showRows)" :key="rows.id" style="margin-bottom: 1vh">
                <el-col :span="4" v-for="(columns,index) in rows.data"
                        :key="columns.id"
                        :offset="index === 0 ? 0 : 1">
                    <div @dblclick="choosePlayingSong(columns)">
                        <HotSongItem :music-detail="columns"/>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="hot-song-show-more" @click="showMore">
            {{ showRows === 5 ? '显示更多' : '收起' }}
        </div>
    </div>
</template>

<script>
import PartTitle from "@/minicomponents/PartTitle.vue";
import ListItem from "@/minicomponents/ListItem.vue";
import {HOTSONGSHOWBG, SINGERHOTSONGS} from "@/http/constant";
import HotSongItem from "@/minicomponents/HotSongItem.vue";
import {mapMutations} from "vuex";

export default {
    name: "HotSongPart",
    components: {HotSongItem, ListItem, PartTitle},
    props: ['hotSongList'],
    data() {
        return {
            showRows: 5,
            playList: []
        }
    },
    methods: {
        ...mapMutations(['ShowBottomPlayer']),
        showMore() {
            this.showRows = 15 - this.showRows
        },
        choosePlayingSong(item) {
            const {id} = item
            const {singers} = this.hotSongList
            this.$store.dispatch('updatePlaySongList', {
                // 选择播放的音乐id
                songId: id,
                isUpdatePlayingList: String(singers) !== String(this.$store.state.playingSongList.id)
            })
            // 固定该列表项的背景
            this.$bus.$emit(HOTSONGSHOWBG, {
                id
            })
            // 显示底部的音乐播放器
            this.ShowBottomPlayer(true)
        }
    },
    computed: {
        // 每一部分的头部信息
        titleInfo() {
            const {type, title, specialRoutes, isShowAll, isChange} = this.hotSongList
            return {
                type,
                title,
                specialRoutes,
                isShowAll,
                isChange
            }
        }
    },
    watch: {
        hotSongList: {
            deep: true,
            handler(newVal) {
                if (newVal.type === SINGERHOTSONGS) {
                    const {singers} = newVal
                    this.playList = newVal.musicList.map(rowItem => {
                        return {
                            id: rowItem.id,
                            data: rowItem.data.map(columnItem => {
                                const {id, name, ar, alia, al, dt} = columnItem
                                return {
                                    id,
                                    musicName: name,
                                    singers: ar,
                                    picUrl: al.picUrl,
                                    alia,
                                    albumName: {
                                        alId: al.id,
                                        alName: al.name,
                                    },
                                    time: dt
                                }
                            })
                        }
                    })
                    let res = []
                    // 将歌曲展开到一个数组里
                    this.playList.forEach(item => {
                        res = [...res, ...item.data]
                    })
                    // 备选播放歌单
                    this.$store.commit('UpdateSongList', {
                        id: singers,
                        // 歌曲来源，4歌单，5专辑
                        listType: newVal.type,
                        playList: res
                    })
                }
            }
        }
    }
}
</script>

<style scoped lang="less">
@import "@/assets/less/common";

.hot-song-part {
  .hot-song-show-more {
    cursor: pointer;
    font-weight: 700;
    color: @metaphorFont;
  }
}
</style>